<template>
  <div class="click-num">
    <div class="subtract get" @click="addClick">
      <img src="~assets/img/cart/add.svg" v-show="!addShowImg" alt="" />
      <img src="~assets/img/cart/add_active.svg" v-show="addShowImg" alt="" />
    </div>
    <div class="add get" @click="subtractClick">
      <img src="~assets/img/cart/subtract.svg" v-show="!subShowImg" alt="" />
      <img
        src="~assets/img/cart/subtract_active.svg"
        v-show="subShowImg"
        alt=""
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "ClickNum",
  data() {
    return {
      addShowImg: false,
      subShowImg: false,
    };
  },
  computed: {
    ...mapGetters(["cartLength", "cartList"]),
  },

  methods: {
    show() {
      setTimeout(() => {
        if (this.addShowImg) {
          this.addShowImg = false;
        }
        if (this.subShowImg) {
          this.subShowImg = false;
        }
      }, 300);
    },
    addClick() {
      // console.log(this.cartLength);
      this.addShowImg = true;
      this.show();
      this.$emit('addClick')
    },

    subtractClick() {
      // console.log(this.cartLength);
      this.subShowImg = true;
      this.show();
      this.$emit('subtractClick')
    },
  },
};
</script>

<style scoped>
.click-num {
  /* background-color: red; */
  display: flex;
  width: 18.33333vw;
  height: 6.66667vw;
  position: absolute;
  left: 75%;
  top: -26%;
}

.get {
  width: 30%;
  height: 20px;
  flex: 1;
}

.get img {
  width: 100%;
}

.add {
  margin-left: 30px;
}
</style>